<template>
	<view class="page-content">
		<view class="header">
			<view class="tip-title">
				温馨提示
			</view>
			<view class="tip-content">
				充值地址请以当前地址为准，如转错地址导致货比丢失，责任自负
			</view>
			<view class="tip-footer">
				钱包二维码
			</view>
		</view>
		<view class="qrcode">
			<view class="qrcode-title">
				扫二维码，转入USDT
			</view>
			<image :src="qrcode_url" style="width: 300upx;height: 300upx;" mode=""></image>
			<view class="recharge-time">
				充值时间：{{payTime}}
			</view>
		</view>
		<view class="recharge-addr">
			<view class="addr-title">
				钱包地址:{{qianbaodz}}
			</view>
			<view class="addr-copy">
				<button size="mini" type="primary">复制</button>
			</view>
		</view>
		<view class="recharge-num">
			<view class="label-num">
				充值数量：
			</view>
			<view class="num">
				{{recharge_num}}
			</view>
		</view>
		<view class="recharge-footer">
			<view class="footer-tip">
				充值金额提示
			</view>
			<view class="footer-tip-content">
				请按照实际到账金额(扣除手续费之后的到账):100进行充值，错误到账金额不予到账!
			</view>
		</view>
		<view class="btn-sub">
			<button type="primary" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		baseURL
	} from '@/utils/http.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		doRechargeAPI
	} from '../../apis/user';
	const recharge_num = ref(0)
	const qrcode_url = ref('')
	const qianbaodz = ref('')
	const qbid = ref('')

	const time = ref(30 * 60 * 1000)
	const timer = ref(null)
	const payTime = ref('30:00')
	const handleSubmit = (async () => {
		const {
			msg
		} = await doRechargeAPI({
			jine: recharge_num.value,
			qbid: qbid.value,
			qianbaodz: qianbaodz.value
		})
		uni.showToast({
			title: msg,
			icon: 'none'
		})
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/me/me'
			})
		}, 1000)


	})
	onMounted(() => {
		fnCountDown()
	})
	const fnCountDown = () => {
		let date = new Date(time.value)
		timer.value = setInterval(() => {
			date.setTime(date.getTime() - 1000)
			let h = date.getUTCHours()
			let m = date.getUTCMinutes()
			let s = date.getUTCSeconds()
			h = h < 10 ? '0' + h : h
			m = m < 10 ? '0' + m : m
			s = s < 10 ? '0' + s : s
			payTime.value = m + ':' + s
			if (date.getTime() <= 0) {
				clearInterval(timer.value)
				payTime.value = '00:00'
				uni.switchTab({
					url: '/pages/me/me'
				})
			}
		}, 1000)
	}
	onLoad((options) => {
		recharge_num.value = options.money ?? 0
		qrcode_url.value = baseURL + options.qrcode ?? ''
		qianbaodz.value = options.qianbaodz ?? ''
		qbid.value = options.qbid
	})
</script>

<style lang="scss">
	.page-content {
		padding: 20upx;

		.header {
			.tip-title {
				padding: 20upx;
			}

			.tip-content {
				padding: 20upx;
			}

			.tip-footer {
				padding: 20upx;
				font-size: 30upx;
				font-weight: bold;
				color: #007AFF;
			}
		}

		.qrcode {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20upx;

			.qrcode-title {
				padding: 20upx;
			}

			.recharge-time {
				padding: 20upx;
			}
		}

		.recharge-addr {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.recharge-num {
			display: flex;
			flex-direction: row;
			padding: 20upx 0;

			.num {
				font-size: 36upx;
				font-weight: bold;
				color: red;
			}
		}

		.recharge-footer {
			.footer-tip {
				padding: 20upx 0;
			}

			.footer-tip-content {
				padding: 20upx 0;
				color: red;
				font-size: 30upx;
			}
		}

		.btn-sub {
			margin-top: 50upx;
		}
	}
</style>